import React from 'react';
import {
  Row,
  Col,
  Table,
  Menu,
  Dropdown,
  Button,
  Icon
} from 'antd';
import axios from 'axios';
import OrderList from '../../CustomService/OrderInfo/OrderList';
import intercept from '../../../utils/intercept';
import { config } from 'utils';
import { Input } from 'antd';
import '../../CustomService/OrderInfo/OrderInfo.less'

export default class BusTicket extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10
      },
      onChange: this.onChange,
      keyword: '',
      stateTxt: '全部订单',
      totalRows: '0'
    };
  };

  componentDidMount() {
    if (this.props.location.query.order !== 'undefined' && this.props.location.query.order != null) {
      this.getOrderInfo({ keyword: this.props.location.query.order })
    } else {
      this.getOrderInfo();
    }
  };

  search(value) {
    this.setState({ keyword: value });
    this.getOrderInfo({ keyword: value });
  }

  handleMenuClick = (e) => {
    this.StateKey = e.key;
    let states = ['待支付', '已支付', '已取消', '已打印', '全部订单'];
    for (let i = 0; i < states.length; i++) {
      if (i == e.key) {
        this.setState({
          stateTxt: states[i]
        })
        this.getOrderInfo();
        return
      }
    }
  }

  onChange = (pagination, filters, sorter) => {
    this.getOrderInfo({
      sortField: sorter.field,
      sortOrder: sorter.order,
      page: pagination.current,
      keyword: this.state.keyword,
      ...filters
    });
  };

  getOrderInfo = (params = {}) => {
    const token = sessionStorage.getItem("token");
    this.setState({ loading: true });
    var keyword = typeof (params.keyword) === "undefined"
      ? ''
      : params.keyword;
    axios
      .get(`${config.api}Station/GetOrderInfo?page=${params.page}&pageSize=${this.state.pagination.pageSize}&keyword=${keyword}&Type=${this.StateKey}`, { headers: { Authorization: 'Bearer ' + token } })
      .then((data) => {
        const pagination = {
          ...this.state.pagination
        };
        // console.log(data);
        pagination.total = data.data.pageList.totalRows;
        pagination.current = params.page;
        this.setState({ loading: false, totalRows: data.data.pageList.totalRows,dataSource: data.data.pageList.collections, pagination });
      }).catch(err => {
        intercept;
      });
  };


  render() {
    const Search = Input.Search;
    const statusstr = ['待支付', '已支付', '已取消', '已打印', '客服申请退款', '客服申请退款成功', '超时支付申请退款', '超时支付退款成功', '用户申请退款', '退款成功'];
    const columns = [
      {
        title: '订单号',
        dataIndex: 'orderCode',
        width: 150
      }, {
        title: '分销商',
        dataIndex: 'traderAccount',
        width: 150
      }, {
        title: '汽车站',
        dataIndex: 'stationName',
        width: 150
      }, {
        title: '目的站',
        dataIndex: 'target',
        width: 150
      }, {
        title: '购票时间',
        dataIndex: 'dotime',
        // sorter: true,
        width: 150
      }, {
        title: '发车时间',
        dataIndex: 'startDate',
        // sorter: true,
        width: 150
      }, {
        title: '张数',
        dataIndex: 'amount',
        width: 150
      }, {
        title: '票价',
        dataIndex: 'price',
        width: 150
      }, {
        title: '状态',
        dataIndex: 'status',
        className: 'childtable',
        width: 150,
        render: (text, record) => {
          return (
            <span>{statusstr[record.status]}</span>
          )
        }
      }
    ];
    const className = "components-table-demo-nested";
    const expandedRowRender = record => <OrderList ordercode={record.orderCode} />; //<p>{record.orderCode}</p>;
    const scroll = {
      y: 600
    };
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="0">待支付</Menu.Item>
        <Menu.Item key="1">已支付</Menu.Item>
        <Menu.Item key="2">已取消</Menu.Item>
        <Menu.Item key="3">已打印</Menu.Item>
        <Menu.Item key="4">全部</Menu.Item>
      </Menu>
    );

    return (
      <div className="orderinfo">
        <Row gutter={8} style={{
          marginTop: '20px'
        }}>
          <Col span={24}>
            <div
              style={{
                textAlign: 'center',
                margin: 10
              }}>
              <Dropdown overlay={menu}>
                <Button style={{ marginLeft: 8, width: '6vw', height: '33px', background: '#e9e9e9' }}>
                  {this.state.stateTxt} <Icon type="down" />
                </Button>
              </Dropdown>
              <Search
                placeholder="请输入任意查询条件"
                style={{
                  width: 600,
                  height: "34px"
                }}
                onSearch={value => this.search(value)} />
              <span style={{ background: '#e9e9e9',color:'red', padding: '9px 10px', borderRadius: '4px' }}>{this.state.totalRows + '个'}</span>
            </div>
            <Table
              {...this.state}
              expandedRowRender={expandedRowRender}
              bordered={true}
              className={className}
              columns={columns}
              scroll={scroll} />
          </Col>
        </Row>
      </div>
    )
  }
}
